<template>
	<view>
		<tanchu type="bottom" :show='show' :mask-click="true" @change="change">
			<view class="mingxitan_content">
				<view class="three_four font_bold heise_ziti text_center">
					筛选
				</view>
				<view class="shaixuan shai">
					<!-- <view class="shaixuan shai" > -->
						<!-- <view v-if="state==1"  @click="dianji(0,'全部')" :class="{mingxi_z:xiabiao == 0}" class="quanbu">全部</view> -->
					<!-- </view> -->
					<view v-for="(item,index) in shaixuan" :class="{mingxi_z:xiabiao == item.state }"   @click="dianji(item.state,item.name)" :index="index" v-if="item.type==state">{{item.name}}</view>
				</view>
				<view class="anniu" style="margin-top:40rpx;width:100%;" @click="queding">确定</view>
			</view>
		</tanchu>
	</view>
</template>

<script>
	// import { base64ToPath, pathToBase64  } from '@/configure/image-tools.js';
	export default {
		data() {
			return {
				shaixuan:[{
					name:'全部',
					type:1,
					state:0
				},{
					name:'客资扣费',
					type:1,
					state:1
				},{
					name:'客资退费',
					type:1,
					state:2
				},{
					name:'佣金扣费',
					type:1,
					state:3
				},{
					name:'佣金退费',
					type:1,
					state:4
				},{
					name:'全部',
					type:0,
					state:1
				},{
					name:'客资余额(平台赠送)',
					type:0,
					state:2
				},{
					name:'成交余额(平台赠送)',
					type:0,
					state:3
				},{
					name:'客资余额(充值)',	
					type:0,
					state:4
				},{
					name:'成交余额(充值)',
					type:0,
					state:5
				},{
					name:' 客资退回',
					type:0,
					state:6
				},{
					name:'成交退回',
					type:0,
					state:7
				}],
				xiabiao:0,
				type_name:'全部',
				pagenum:1,
			}
			
		},
		props: {
			show: {
				type: Boolean,
				default: false
			},
			zuangtai: {
				type: Number,
				default: 0
			},
			state: {
				type: String,
				default: 0
			},
			// 0  充值   1消费
		},
		onLoad() {},
		watch: {
			show(newValue) {
				if(this.state==0){
					console.log('充值')
					this.xiabiao=this.zuangtai
					console.log(this.zuangtai)
				}else{
					console.log('消费明细')
					this.xiabiao=this.zuangtai
				}
				this.togglePopup('bottom', 'tip');
			}
			
		},
		mounted() {
			// this.haibao();
		},
		methods: {
			change(e) {
				this.$emit('queding',{
					state: 6,
					show: e.show
				})
			},
			dianji(state,name){
				this.type_name=name;
				this.xiabiao=state;
			},
			togglePopup(type, open) {
				if (open === 'tip') {
					
				} else {
					this.$refs[open].open()
				}
			},
			queding(){
				this.$emit('queding',{
					state: 1,
					xiabiao:this.xiabiao,
					type_name:this.type_name,
					pagenum:this.pagenum,
					show: false
				})
			}
		}
	}
</script>

<style lang="scss">
	.mingxitan_content{
		width:calc(100% - 120rpx);
		overflow: hidden;
		margin: 0 auto;
		background-color: $white_ziti;
		border-radius: 30rpx 30rpx 0rpx 0rpx;
		position: fixed;
		bottom: 0px;
		padding: 40rpx 60rpx 50rpx 60rpx;
	}
	.shaixuan{
		display: flex;
		flex-wrap: wrap;flex-direction: row;
		justify-content: space-between;
		align-items: center;
		align-content: space-around;
		view{
			width: 45%;
			text-align: center;
			background:$qianhui_eee;
			color:$qianhui_ziti;
			margin-top:30rpx;
			line-height: 70rpx;
			border-radius: 12rpx;
			font-size: 28rpx;
		}
	}
	.shai{
		// display: block;
	
	}
	.shaixuan view:nth-child(7),.shaixuan view:nth-child(8){
		width: 47.5%;
	}
	.mingxi_z{
		color:$zhuce_color !important;
		background:rgba($zhuce_color,0.2) !important;
	}
	.quanbu{
		width: 100%;
	}
</style>
